<template>
	<view class="search-view">
		<image class='search-img' src="@/static/icon/search.png"/>
		<button class='btn' @click='search'>搜索</button>
		<input class='input' v-model='searchText' type='text' placeholder="请输入您要搜索的商品" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				searchText: '荔枝',
				searchResult: []
			}
		},
		methods:{
			search(){
				if(this.searchText == ''){
					uni.showToast({
						title:'搜索内容为空'
					})
				}else{
					this.searchResult = []
					this.$store.state.a.allData.map(item=>{
						if(item.name.includes(this.searchText)){
							this.searchResult.push(item)
							uni.$emit('sendSearch',this.searchResult)
							this.$store.state.a.hotData.push(this.searchText)
						}
					})
				}
			}
		}
	}
</script>

<style lang='scss'>
.search-view{
	width: 100%;
	height: 70rpx;
	display: flex;
	align-items: center;
	position: relative;
	.input{
		width: 95%;
		height: 70rpx;
		border: 2rpx solid #00BFFF;
		background-image: linear-gradient(to right,#FFFFFF,#F0F8FF);
		padding-left: 75rpx;
		border-radius: 20px;
		font-size: 28rpx;
		color: #999999;
	}
	.search-img{
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		z-index: 2;
		left: 25rpx;
	}
	.btn{
		width: 140rpx;
		height: 67rpx;
		line-height: 67rpx;
		border-radius: 20px;
		font-size: 28rpx;
		letter-spacing: 5rpx;
		color: white;
		position: absolute;
		z-index: 99;
		right: 5rpx;
		background-image: linear-gradient(to right,#00BFFF,#1E90FF);
	}
}
</style>
